<template>
  <div class="wrapper">
    <minbar title="现金券" :isPadding="true"></minbar>
    <x-list ref="clist" :config="configData" @receiveData="receiveData">
      <div slot="content">
        <div class="x-top-div">
          <div class="x-top">
            <text class="x-text1">账户余额：{{getAccountNum()}}元</text>
            <text class="x-text2" @click="showCashDialog">现金卡充值</text>
          </div>
        </div>
          <div class="x-content">
            <div class="x-content-div">
              <text class="x-content-title">现金券明细</text>
            </div>
            <div class="x-cash-div" v-for="(data,index) in bidayData" :key="index">
              <!-- 标题 -->
              <div class="x-cash-title">
                <text class="iconfont x-cash-icon" :style="getTypeStyle(data.action_type)">{{getType(data.action_type)}}</text>
                <text class="x-cash-text ">{{data.create_time}}</text>
                <text class="x-cash-jine">{{getPrice(data.amount)}}</text>
              </div> 
              <!-- 内容 -->
              <div class="x-cash-on">
                <div class="x-cash-content">
                  <text class="x-cash-type" :style="getTypeStyle(data.action_type)">{{data.type}}</text>
                  <text class="x-cash-tright" :style="getTypeStyle(data.action_type)">￥{{toFixed(data.remain)}}</text>
                </div>
                <div class="x-cash-content" v-if="showRemark(data)" style="margin-top:10px;">
                  <text class="x-cash-detail">{{getRemark(data)}}</text>
                  <text class="x-cash-beizhu">备注</text>
                </div>
                <div class="x-cash-content">
                  <text class="x-cash-detail">订单号：{{data.action_no}}</text>
                </div>
              </div>
            </div> 
          </div>
        </div>
    </x-list>
    <x-mask height="440"
              width="650"
              border-radius="5"
              duration="200"
              mask-bg-color="#FFFFFF"
              :has-animation="hasAnimation"
              :has-overlay="true"
              :show-close="true"
              :show="maskShow"
              @maskSetHidden="maskSetHidden">
      <div class="content">
        <input type="text" class="x-input" placeholder="请输入卡号"  v-model="sn" @input="sninput"/>
        <input type="password" class="x-input" placeholder="请输入密码" v-model="snpass" @input="snpassinput"/>
        <button 
              @buttonClick="chargeClick"
              text="确定" 
              :textStyle="{fontSize:30}"
              :btnStyle="{width:470,height:80,marginTop:10}">
        </button>
      </div>
    </x-mask>
    
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
export default { 
  components: {
    "minbar" : require("../../../common/component/minbar.vue"),
    "button": require("../../../common/component/button.vue"),
    "x-mask": require("../../../common/component/mask.vue"),
    "x-list": require("../../../common/component/list.vue")
  },
  data() {
    return {
      maskShow:false,
      hasAnimation:false,
      account:0,
      /* 列表action配置 */
      configData:{
        pageRow:{
          page:1,
          limit:10
        },
        action:"/member/coin/log"
      },
      /* 卡号密码 */
      sn:"",
      snpass:"",
      /* 主数据data */
      bidayData :[]
    };
  },
  created(){
    /* 获取账户余额 */
    this.getAccount();
  },
  methods: {
    receiveData(type,data){
      if(type=="refresh"){
        this.bidayData = data;
      }else{
        this.bidayData.push(...data);
      }
    },
    /* 处理余额 */
    getAccountNum(){
      return this.account.toFixed(2);
    },
    /**获取账户余额 */
    getAccount(){
      asCore.post("/member/coin/account",{},(data,msg,flag)=>{
        this.account = data.amount;
      });
    },
    getPrice(price){
      if(price>0){
        return "+"+price;
      }else if(price<0){
        return price;
      }
    },
    toFixed(price){
      if(!price) return "0.00";
      return price.toFixed(2);
    },
    /* 是否显示备注 */
    showRemark(data){
      var dtype = data.action_type;
      if(dtype==3||dtype==1||dtype==2) {
        return true;
      }
    },
    /* 获取备注内容 */
    getRemark(data){
      var dtype = data.action_type;
      if(dtype==3) {
        return data['detail']['receive_account']['name'];
      }else if(dtype==4||dtype==1){

        return data['detail']['remark']?data['detail']['remark']:"无";
      }else if(dtype==2){
        return data['detail']['reason']?data['detail']['reason']:"无";
        //asCore.alert(JSON.stringify(data));
      }
    },
    /* 根据类型获取图标 */
    getType(type){
      switch (type) {
        case 3:
          return "\ue65b";
          break;
        case 1:
          return "\ue643";
          break;
        case 4:
          return "\ue69f";
          break;
        case 2:
          return "\ue640";
          break;
        default:
          break;
      }
    },
    /* 根据类型获取字体颜色 */
    getTypeStyle(type){
      switch (type) {
        case 3:
          return {color:"#d2a13a"};
          break;
        case 1:
          return {color:"#359a8a"};
          break;
        case 4:
          return {color:"#7764b5"};
          break;
        case 2:
          return {color:"#637bb7"};
          break;
        default:
          break;
      }
    },
    /**是否显示隐藏充值对话框 */
    showCashDialog(){
      this.sn = "";
      this.snpass = "";
      this.$nextTick(()=>{
        this.maskShow = true;
        this.hasAnimation = true;
      });
    },
    maskSetHidden(){
      this.maskShow = false;
    },
    /**卡号卡密输入 */
    sninput(event){
      this.sn = event.value;
    },
    snpassinput(event){
      this.snpass = event.value;
    },
    /**确认充值 */
    chargeClick(){
      var _this = this;
      if(!_this.sn) {
        asCore.toast("请输入充值卡号");
        return;
      }
      if(!_this.snpass) {
        asCore.toast("请输入充值卡密");
        return;
      }
      var param = {
        sn:_this.sn,
        password:_this.snpass
      };
      asCore.post("/member/coin/charge",param,(data,msg,flag)=>{
        if(flag==true){
          asCore.alert("充值成功");
          _this.maskShow = false;
        }else{
          asCore.toast("充值失败,请检查卡号卡密是否正确");
        }
      });
    }
  }
};
</script>
<style scoped>
 .iconfont {
  font-family:iconfont;
}
.wrapper {
  background-color: #dedfe1;
}
.x-top-div {
  padding-top:30px;
  padding-bottom: 30px;
}
.x-top {
  background-color: #869dd1;
  height: 90px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left:25px;
  padding-right: 25px;
}
.x-text1 {
  flex: 1;
  font-size: 36px;
  color: #Fff;
}
.x-text2 {
  width: 220px;
  background-color: #Fff;
  color: #32405d;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size:32px;
  border-radius: 40px;
}
.x-text2:active {
  background-color: #32405d;
  color: #fff;
}
.x-content {
  padding: 25px;
  padding-top: 0px;
  background-color: #fff;
}
.x-content-div {
  position: sticky;
  padding-top: 25px;
  padding-bottom: 20px;
  background-color: #fff;
  margin-bottom:20px;
}
.x-content-title {
  border-left-color: #735a24;
  border-left-width: 10px;
  padding-left:15px;
  font-size: 32px;
}
.x-cash-div {
  width: 700px;
  background-color: #ffffff;
  border-radius: 15px;
  margin-bottom:25px;
  box-shadow:2px 2px 5px 2px rgba(0, 0, 0, 0.253);
  border-color: #dedede;
  border-width: 1px;
}
.x-cash-div:active {
  background-color: #eee;
}
.x-cash-title {
  height:80px;
  justify-content: center;
  padding-left: 20px;
  border-bottom-color: #999999;
  border-bottom-style:dashed;
  border-bottom-width: 1px;
  flex-direction: row;
}
.x-cash-on {
  padding-left:20px;
  padding-top:20px;
  padding-bottom:20px; 
}
.x-cash-icon {
  font-size:32px;
  line-height: 80px;
  padding-right:10px;
}
.x-cash-content {
  justify-content: center;
  align-items: center;
  padding-left: 25px;
  padding-right: 25px;
  flex-direction: row;
  height: 50px;
}
.x-cash-detail {
  color:#1f1e23;
  font-size:28px;
  flex: 1;
}
.x-cash-text {
  color: #1f1e24;
  font-size: 30px;
  line-height: 80px;
  flex: 1;
}
.x-cash-jine {
  color: #b00b2b;
  font-size: 35px;
  padding-right:25px;
  line-height: 80px;
}
.x-cash-type {
  flex: 1;
  font-size: 32px;
}
.x-cash-tright {
  font-size: 30px;
}
.x-cash-beizhu {
  font-size: 24px;
  color:#68686a;
}
.x-input {
  height:80px;
  border-color: #64626d;
  border-width: 1px;
  border-radius: 50px;
  margin-bottom: 30px;
  padding-left:40px;
}
.content {
  padding-top:70px;
  padding-left:90px;
  padding-right:90px;

}
</style>

